<template>
  <div>
    <van-nav-bar title="修改昵称" left-arrow  @click="fan"/>
    <div class="van">
      <van-notice-bar wrapable :scrollable="false" text="为保护您的隐私，您的昵称将用于社区交流和医患沟通" class="notbar" />
    </div>
    <div class="box">
      <p><input type="text" v-model="val" placeholder="昵称限制10个汉字或20个字母、数字" style="padding-left: 10px;"><img src="../../img/关闭.png" alt="" @click="clear" class="em-img"></p>
      <button class="btn" @click="emit">确认修改</button>
    </div>
  </div>
</template>
<script setup lang="ts">
import { useRouter } from 'vue-router';
import {ref} from 'vue'
const router = useRouter()
const val = ref('')
const fan=()=>{
  router.push('/emit')
}
// const onClickLeft = () => history.back();
// 点击修改
const emit=()=>{
  const name = localStorage.getItem('data')
  localStorage.setItem('nickname',val.value)
  router.push('/emit')
  // alert('修改成功')
}
// 点击清空
const clear=()=>{
  val.value = ''
}
</script>
<style scoped>
.van{
  width: 100%;
  height: 110px;
}
.notbar{
  width: 96%;
  height: 90px;
  line-height: 34px;
  border-radius: 10px;
  margin-left: 2%;
  color: #FF6F1D;
  font-weight: 600;
  font-size: 28px;
  background-color: #FFEFE3;
}
.box{
  width: 100%;
  height: 1150px;
  background-color: #eae8e8;
}
.box>p>input{
  width: 94%;
  height: 90px;
  border-radius: 10px;
  border: none;
  margin-left: 3%;
  margin-top: 20px;
  position: relative;
  font-size: 30px;
}
.box>p>img{
  position: absolute;
  top: 250px;
  right: 60px;
}
.btn{
  width: 94%;
  height: 80px;
  margin-left: 3%;
  margin-top: 100px;
  background-color: #0070FF;
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 30px;
}
.em-img{
  width: 40px;
}
</style>
